<template>
  <div>
    <el-card shadow="never">
      <table class="cs-detail-card">
        <tr>
          <td>身份证姓名：</td>
          <td>{{ detail.idCardName }}</td>
          <td>支付宝姓名：</td>
          <td>{{ detail.aliPayNick }}</td>
          <td>定位地址：</td>
          <td>{{ detail.homePlace }}</td>
        </tr>
        <tr>
          <td>身份证号：</td>
          <td>{{ detail.idCardNum }}</td>
          <td>支付宝账号：</td>
          <td>{{ detail.alipayAccount }}</td>
        </tr>
      </table>

      <el-divider />
      <table class="cs-detail-card">
        <tr>
          <td>
            头像：
          </td>
          <td>
            <div class="img-box">
              <image-tooltip :image-id="detail.avatar">
                <el-image
                  slot="img"
                  style="width: 100px; height: auto;"
                  :src="detail.avatar"
                  :preview-src-list="[detail.avatar]"
                />
              </image-tooltip>
              <el-button v-if="detail.avatar" type="primary" size="mini" @click="deleteAvatar(detail)">删除</el-button>
            </div>
          </td>
          <td>
            个人封面：
          </td>
          <td>
            <div class="img-box">
              <image-tooltip :image-id="detail.backgroundImage">
                <el-image
                  slot="img"
                  style="width: 100px; height: auto;"
                  :src="detail.backgroundImage"
                  :preview-src-list="[detail.backgroundImage]"
                />
              </image-tooltip>
              <el-button v-if="detail.backgroundImage" type="primary" size="mini" @click="deleteBg(detail)">删除</el-button>
            </div>
          </td>
          <td>
            真人认证：
          </td>
          <td>
            <div class="img-box">
              <image-tooltip :image-id="detail.liveCertificationImage">
                <el-image
                  slot="img"
                  style="width: 100px; height: auto;"
                  :src="detail.liveCertificationImage"
                  :preview-src-list="[detail.liveCertificationImage]"
                />
              </image-tooltip>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            形象墙：
          </td>
          <td colspan="10">
            <div class="img-box">
              <ul class="photos-list">
                <li
                  v-for="img in detail.photoes"
                  :key="img"
                  @contextmenu.prevent.stop="onCheckedPhoto(img)"
                >
                  <i
                    v-if="photoList.includes(img)"
                    class="el-icon-check"
                    style="z-index: 100"
                  />
                  <image-tooltip :image-id="img">
                    <el-image
                      slot="img"
                      style="width: 100px; height: auto;"
                      :src="img"
                      :preview-src-list="[img]"
                    />
                  </image-tooltip>
                </li>
              </ul>
              <el-button v-if="detail.photoes && detail.photoes.length" type="primary" size="mini" @click="delPhotos(detail)">删除</el-button>
            </div>
          </td>
        </tr>
      </table>

      <el-divider />

      <table class="cs-detail-card">
        <tr>
          <td>年龄：</td>
          <td>{{ detail.age }}</td>
          <td>出生日期：</td>
          <td v-if="detail.birthday">{{ new Date(detail.birthday) | formatTime }}</td>
          <td v-else>{{ '暂无' }}</td>
          <td>身高：</td>
          <td>{{ detail.height }}</td>
          <td>职业：</td>
          <td>{{ detail.professional }}</td>
        </tr>
        <tr>
          <td>内心独白：</td>
          <td>{{ detail.intro }}</td>
        </tr>
        <tr>
          <td>标签：</td>
          <td>{{ detail.personalTag }}</td>
        </tr>
        <tr>
          <td>性格：</td>
          <td>{{ detail.character }}</td>
        </tr>
        <tr>
          <td>擅长话题：</td>
          <td>{{ detail.topicTag }}</td>
        </tr>
        <tr>
          <td>兴趣爱好：</td>
          <td>{{ detail.interestTag }}</td>
        </tr>
      </table>

      <el-divider />
      <table class="cs-detail-card">
        <tr>
          <td>语音价格：{{ detail.voicePrice }}</td>
          <td>语音接听：{{ detail.voiceChat ? '是' : '否' }}</td>
        </tr>
        <tr>
          <td>视频价格：{{ detail.videoPrice }}</td>
          <td>视频接听：{{ detail.videoChat ? '是' : '否' }}</td>
        </tr>
        <tr>
          <td>接受试聊：{{ detail.tryChat ? '是' : '否' }}</td>
        </tr>
        <tr>
          <td>显示地理位置：{{ detail.viewLocation ? '是' : '否' }}</td>
        </tr>
      </table>
    </el-card>
    <ImageViewer
      :visible.sync="showImage"
      :url="imageUrl"
    />
  </div>
</template>
<script>
import { xhrDelAvatar, xhrDelBg, xhrDelphoto } from '@api/anchor'
import ImageViewer from '@/components/ImageViewer'

export default {
  components: { ImageViewer },
  props: {
    list: {
      type: Array,
      default: null
    },
    detail: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      photoList: [],
      showImage: false,
      imageUrl: null
    }
  },
  created() {
  },
  methods: {
    zoomImage(url) {
      this.showImage = true
      this.imageUrl = url
    },
    deleteAvatar({ id }) {
      this.$confirm('确定删除头像？').then(() => {
        xhrDelAvatar({ status: 2, userIds: [id] }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.$emit('refresh')
        })
      })
    },
    deleteBg({ id }) {
      this.$confirm('确定删除封面？').then(() => {
        xhrDelBg({ status: 2, userIds: [id] }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.$emit('refresh')
        })
      })
    },
    delPhotos({ id }) {
      if (this.photoList.length === 0) {
        this.$message('未选择待删除图片')
        return
      }
      this.$confirm('确定删除形象墙？').then(() => {
        const p = {
          userPhotosList: [
              { status: 2, userId: id, photos: this.photoList }
          ]
        }
        xhrDelphoto(p).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.$emit('refresh')
        })
      })
    },
    onCheckedPhoto(img) {
      console.log(this.photoList.includes(img), 'xxxx')
      this.photoList.includes(img) ? this.photoList = this.photoList.filter(item => item !== img) : this.photoList.push(img)
    }
  }
}
</script>
<style lang="scss" scoped>
.img-box{
  display: flex;
  align-items: flex-end;
  button{
    margin-left: 5px;
  }
  .photos-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    li {
      width: 100px;
      height: 100px;
      margin-right: 5px;
      list-style: none;
      cursor: pointer;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .el-icon-check {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 40px;
        height: 40px;
        margin: auto;
        color: #fff;
        background: #67c23a;
        border-radius: 50%;
        font-size: 30px;
        line-height: 40px;
        text-align: center;
      }
    }
  }
}
</style>
